<!-- 管理角色的权限的抽屉 -->
<template>
   <BasicDrawer
      v-bind="$attrs"
      @register="registerDrawer"
      showFooter
      :title="getTitle"
      width="500px"
      @ok="handleSubmit"
   >
      <BasicForm @register="registerForm">
         <template #menu="{ model, field }">
            <BasicTree
               v-model:value="model[field]"
               :treeData="treeData"
               :replaceFields="{ title: 'menuName', key: 'id' }"
               checkable
               toolbar
               title="菜单分配"
            />
         </template>
      </BasicForm>
   </BasicDrawer>
</template>

<script lang="ts">
   import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './role.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicTree, TreeItem } from '/@/components/Tree';

   import { getMenuList } from '/@/api/demo/system';

   export default defineComponent({
      name: 'RoleDrawer',
      components: { BasicDrawer, BasicForm, BasicTree },
      emits: ['success', 'register'],
      setup(_, { emit }) {
         const isUpdate = ref(true);
         const treeData = ref<TreeItem[]>([]);

         const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
            labelWidth: 90,
            schemas: formSchema,
            showActionButtonGroup: false,
         });

         const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
            resetFields();
            setDrawerProps({ confirmLoading: false });
            // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
            if (unref(treeData).length === 0) {
               treeData.value = (await getMenuList()) as any as TreeItem[];
            }
            isUpdate.value = !!data?.isUpdate;

            if (unref(isUpdate)) {
               setFieldsValue({
                  ...data.record,
               });
            }
         });

         const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));

         async function handleSubmit() {
            try {
               const values = await validate();
               setDrawerProps({ confirmLoading: true });
               // TODO custom api
               console.log(values);
               closeDrawer();
               emit('success');
            } finally {
               setDrawerProps({ confirmLoading: false });
            }
         }

         return {
            registerDrawer,
            registerForm,
            getTitle,
            handleSubmit,
            treeData,
         };
      },
   });
</script>
